<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">受益方列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-button
					type="primary"
					@click="
						initForm();
						dialogVisible = true;
					"
					icon="el-icon-circle-plus-outline"
					style="margin-bottom: 20px;"
				>
					添加
				</el-button>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="id" label="ID"></el-table-column>
					<el-table-column label="头像">
						<template slot-scope="scope">
							<div class="demo-image__preview">
							  <el-image 
							    style="width: 50px; height: 50px;border-radius: 50%;"
							    :src="scope.row.headimg" 
							    :preview-src-list="[scope.row.headimg]">
							  </el-image>
							</div>  
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称"></el-table-column>
					<el-table-column prop="tel" label="手机号"></el-table-column>
					<el-table-column prop="last_login_time" label="最后登录时间"></el-table-column>
					<el-table-column label="钱包余额">
						<template slot-scope="scope">
							<div>{{scope.row.validmoney || 0}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="createtime" label="创建时间"></el-table-column>
					<el-table-column label="操作" width="100">
						<template slot-scope="scope">
							<el-button
								size="mini"
								@click="
									initForm(scope.row);
									dialogVisible = true;
								"
							>
								编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination
					background
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					:pager-count="pageCount"
					prev-text="上一页"
					next-text="下一页"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<el-dialog :title="form.id ? '修改收益方' : '添加收益方'" :visible.sync="dialogVisible" width="500px">
			<el-form :model="form" label-width="120px" ref="form">
				<el-form-item label="名称"><el-input v-model="form.name" placeholder="请输入受益方名称"></el-input></el-form-item>
				<el-form-item label="手机号">
					<el-input @input="duplicateChecking()" v-model="form.tel" :disabled="form.id ? true : false" placeholder="请输入手机号" maxlength="11"></el-input>
					<div v-if="isPhoneMsg" style="color: red;position: absolute;line-height: 20px;">该手机号已重复，请更换其他手机号！</div>
					<!-- <div style="color: #13ce66;position: absolute;line-height: 20px;">手机号已重发，请更换其他手机号！</div> -->
				</el-form-item>

				
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { query, save, checkname } from '@/api/beneficiary';
export default {
	name: 'beneficiary',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			dialogVisible: false,
			form: {
				id: '',
				name: '',
				tel: '',
			},
			isPhoneMsg: false
		};
	},
	created() {
		this.getData();
	},
	methods: {
		initForm(item) {
			this.isPhoneMsg = false
			if (item) {
				this.form = { ...item };
			} else {
				this.form = {
					id: '',
					name: '',
					tel: '',
				};
			}
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		},

		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize
			};

			query(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		
		// 添加修改
		add() {
			if (this.isPhoneMsg) {
				this.$message.error('该手机号已重复，请更换其他手机号！');
				return;
			}
			if (!this.form.tel) {
				this.$message.error('请输入手机号！');
				return;
			}
			if (this.form.tel.length != 11) {
				this.$message.error('手机号格式不正确！');
				return;
			}
			if (!this.form.name) {
				this.$message.error('请输入受益方名称！');
				return;
			}
		

			let data = {};
			if (this.form.id) {
				data['a.id'] = this.form.id;
			}
			data['a.name'] = this.form.name;
			data['a.tel'] = this.form.tel;

			save(data).then(res => {
				if (res.state) {
					this.$message({
						message: res.msg,
						type: 'success'
					});
					this.dialogVisible = false;
					if(!this.form.id) {
						this.currentPage = 1;
					}
					this.getData();
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 查重
		duplicateChecking() {
			if (!this.form.tel) {
				this.isPhoneMsg = false;
				return;
			}
			if (this.form.tel.length != 11) {
				return;
			}
			checkname({
				phone: this.form.tel
			}).then(res => {
				if (res.state) {
					this.isPhoneMsg = true;
				} else {
					this.isPhoneMsg = false;
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped></style>
